<template>
  <div class="container">
    <button @click="printPage" class="print-button no-print">打印</button>
    <h1 class="no-print">第一个A4</h1>
    <div id="printableArea1" class="a4-div">
      <img
          src="https://img.zcool.cn/community/01ae6d5d4ce384a8012187f473de20.jpg@1280w_1l_2o_100sh.jpg"
          alt="Image 1"
          class="fill-image"
      />
    </div>
    <h1 class="no-print">第二个A4</h1>
    <div id="printableArea2" class="a4-div">
      <img
          src="https://gd-hbimg.huaban.com/7ed53183793c83478c294837de5ce2ef60d0fc3a3a7eb-b9xh5g_fw658"
          alt="Image 2"
          class="fill-image"
      />
    </div>
    <p class="no-print instructions">
      打印时，请在打印设置中取消勾选 "页眉和页脚" 以获得最佳效果。
    </p>
  </div>
</template>

<script>
export default {
  name: "PrintPage",
  methods: {
    printPage() {
      window.print();
    },
  },
};
</script>

<style scoped>
.container {
  text-align: center;
}

.print-button {
  margin: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.a4-div {
  width: 210mm;
  height: 297mm;
  margin: 0 auto 20px;
  background-color: white;
  position: relative;
  overflow: hidden;
}

.fill-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.instructions {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

@media print {
  @page {
    size: A4;
    margin: 0;
  }

  body {
    margin: 0;
    padding: 0;
  }

  .container {
    width: 100%;
    height: auto;
  }

  .a4-div {
    page-break-after: always;
    margin: 0;
    border: none;
  }

  .no-print {
    display: none !important;
  }

  .fill-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    page-break-inside: avoid;
    page-break-after: always;
  }
}
</style>
